<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
    <meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环保数据管家</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
    <link rel="stylesheet" type="text/css" href="assets/css/map.css">
    <style type="text/css">
	.zhibiao-legend .zb-item {
	    background-color:#FFF!important;
	}
    .zhibiao-legend .disable{
        background-color: #efefef !important;
		border-color: #cccccc !important;
		color:#666666 !important;
    }
	.highcharts-legend {display:none;}
	body {max-width:100%;}
	.order-hd-title a {text-decoration:none;color:#333333;}
	.aqi-tables tbody td.date small {line-height:normal;}
	#month-select,.month-select{outline: none;border: 1px solid #23AE39;border-radius: 0.15rem;background: none;font-size: 0.4rem;line-height: 0.4rem;}
	.order-bd tfoot td{
		font-size: 0.5rem;
		text-align: left;
		color: #666666;
	}
	i.targetNum{color: #666666!important;font-size:0.5rem!important;}
	#sorttable tr td{
		padding: 8px 0;
		font-size: 0.6rem;
	}
    .aqi-map{
        position: relative;
        width: 100%;
        height: 20rem;
        background-color: #F9F9F9;
        margin-bottom: 2rem;
    }
    #chart-1{
        padding-left:30px;
    }
    #chart-1 svg{
        margin: 0 auto;
    }
	</style>
	<script type="text/javascript">
		/**
   * 对Date的扩展，将 Date 转化为指定格式的String
   * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
   * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
   * eg:
   * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
   * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
   * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
   * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
   * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
   */
  Date.prototype.pattern = function(fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
      "H+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    var week = {
      "0": "\u65e5",
      "1": "\u4e00",
      "2": "\u4e8c",
      "3": "\u4e09",
      "4": "\u56db",
      "5": "\u4e94",
      "6": "\u516d"
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "") : "") + week[this.getDay() + ""]);
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
	</script>
</head>
<body>
	<header>
		<span id="app-back" class="app-back"><i class="iconfont icon-left"></i></span>
		<span class="title">环保数据管家</span>
	</header>
	<!--<div class="map-btns flex-row" style="text-align: center;color: #333333;">
		<span class="active flex-row-item">监测点</span>
		<span id="redline" class="flex-row-item">生态红线</span>
	</div>-->
    <div class="order-hd">
        <div class="order-hd-title">空气质量优良率</div>
        <div class="order-hd-select">
				<select class="month-select" id="ylv-month-select">				
				</select>                				
			</div>
    </div>
    <div id="chart-1" style="width:200px;height:200px;margin:0 auto;"></div>
    <div id="chart-1-title" style="text-align:center;font-size:0.6rem;padding-bottom:1rem;"></div>
    
    <div class="order-tables">
	    <div class="order-hd">
		    <div class="order-hd-title"><a href="aqiarea-list.html">各区PM2.5浓度</a></div>
			<div class="order-hd-select">
				<select id="month-select">				
				</select>                				
			</div>
		</div> 
        <div class="order-bd">
			<table>
				<thead class="thead">
					<tr class="firstRow">
						<td rowspan="2" colspan="1">区</td>
						<td valign="top" rowspan="1" colspan="4">PM2.5（μg/m3）</td>
					</tr>
					<tr id="order-month-warp">
						<td>2016年4月</td>
						<td>环比</td>
						<td>同比</td>
						<td>较2013年全年(目标)</td>
					</tr>
				</thead>
				<tbody id="sorttable">
				</tbody>
				<tfoot>
					<tr>
						<td colspan="5">注：标有*的区与2014年比较<span id="targetNum"></span></td>
					</tr>
				</tfoot>
			</table>		
		</div>		
	</div>
    <div class="order-hd">
        <div class="order-hd-title">环境地图</div>
    </div>
	<div class="aqi-map">
		<div id="allmap"></div>
	</div>
	<!--<div id="maptap" class="map-btns flex-row">
		<span data-idx="0" class="active map-btns-item flex-row-item">全国</span>
		<span data-idx="1" class="map-btns-item flex-row-item">长三角</span>
		<span data-idx="2" class="map-btns-item flex-row-item">南京</span>
	</div>-->
	<footer class="flex-row">
		<span id="app-main-link" class="flex-row-item"><i class="iconfont icon-weather"></i> 空气质量监测</span>
		<span id="app-middle-link" class="flex-row-item"><i class="iconfont icon-liuliangxinxishangbao"></i> 空气质量分析</span>
		<span id="app-map-link" class="flex-row-item active"><i class="iconfont icon-iconfontweizhi"></i> 目标考核</span>
	</footer>
</body>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/touch.min.js"></script>
<script src="assets/echart/echarts.min.js"></script>
<script src="assets/echart/china.js"></script>
<script src="assets/maps/geocoordmap.js"></script>
<script src="assets/js/require.js"></script>

<script>
    var host='http://58.213.141.220:8989/njhbindex';
	
	touch.on('#app-back', 'tap', function(ev){
	  location.href='index.html';
	});
	touch.on('#app-main-link', 'tap', function(ev){
	  location.href='index.html';
	});
    touch.on('#app-middle-link', 'tap', function(ev){
	  location.href='air-quality.html';
	});
	touch.on('#app-map-link', 'tap', function(ev){
	  location.href='newmap.html';
	});
    
	function getJSONData(url,callback){
      $.ajax({
          type: "get",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          url: url,  //这里是网址
          success: function (json) {
              callback(json)
          },
          timeout: 90*1000,
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.error(url,textStatus+": "+errorThrown);
          }
      });
  }
  function RMS(s){
  	return s.replace('市','');//.replace('特别行政区','');
  }
  
  //生成12个月的下拉
	var currentMonth = (new Date()).pattern("M")-1,
	    currentYear = (new Date()).pattern("yyyy");
	if(currentMonth==0){
		currentMonth=12;
		currentYear-=1;
	}
	currentMonth=currentMonth<10?'0'+currentMonth:currentMonth;
    var monthArray = function (cy,cm) {
        var result = [];
        for(var y=cy;y>2015;y--){
            if(cy==y){
                for(;cm>=1;cm--){
                    result.push(y+'-'+paddingZero(cm));
                }
            }else{
                for(var m=12;m>=1;m--){
                    result.push(y+'-'+paddingZero(m));
                }
            }
        }
        result.push('2015-12')
        return result;
    }
    function paddingZero(m){
        if(m.length>1) return m;
        return m < 10 ? "0" + m : m;
    }
     
	var tmpselect=''; 
    monthArray(currentYear,currentMonth).forEach(function(e,v){
        tmpselect+='<option value="'+e+'">'+e.replace(/-/g,'年')+'月</option>';
	});
	$('#ylv-month-select').html(tmpselect);
    $('#month-select').html(tmpselect);
	// 月份切换
    $('#ylv-month-select').change(function(){
	    setYlvChart($(this).val());
    });
    // 月份切换
    $('#month-select').change(function(){
	    setSortTable($(this).val());
    });
    
    var areas={
			1:["南京开发区","2008","仙林大学城",-13,1],
			2:["栖霞区","2008,2007","仙林大学城,迈皋桥",-13,2],
			3:["建邺区","2009","奥体中心",-13,3],
			4:["高新开发区","2010","浦口",-13,4],
			5:["浦口区","2010","浦口",-13,5],
			6:["玄武区","2004","玄武湖",-13,6],
			7:["鼓楼区","2001,2006","草场门，山西路",-13,7],
			8:["秦淮区","2003","瑞金路",-13,8],
			9:["六合区","2022","雄州",-4,9],
			10:["江宁开发区","2018","将军大道",-13,10],
			11:["雨花台区","2002","中华门",-13,11],
			12:["南京化工园","2011","化工园",-13,12],
			13:["高淳区","2013","淳溪",-2,13],
			14:["江宁区","2016","彩虹桥",-4,14],
			15:["溧水区","2024","永阳",-2,15],
			16:["全市","2000","全市",-13,16]
		},areas2014={
			9:'*',
			13:'*',
			14:'*',
			15:'*',
		};
	getJSONData(host+'/data?act=areainfo',function(data){
		var trs=[];
		if(data.Error==null){
			data.Data.forEach(function(e,i){
				areas[e.id][0]=e.name;
				areas[e.id][1]=e.codes;
				areas[e.id][2]=e.areas;
				areas[e.id][3]=e.target;
				areas[e.id][4]=e.index;
				trs.push('<tr id="st-'+e.id+'"><td>'+e.name+(areas2014[e.id]!=undefined?'*':'')+'</td><td></td><td></td><td></td><td></td></tr>');
			});
		}
		$('#sorttable').html(trs.join(''));
		setSortTable(currentYear+'-'+currentMonth);
	});
	function setSortTable(month){
		var qstr=month.split('-');
		var curmstr=qstr[0]+'年'+qstr[1]+'月';
		$('#order-month-warp').find('td').eq(0).html(curmstr);
		getJSONData(host+'/data?act=areamonth&month='+month,function(data){
			if(data.Error==null){
				data.Data.forEach(function(e){
					var tds=$('#st-'+e.areaid).find('td')
						,g1=getGrowth(e.value,e.hbrate)
						,g2=getGrowth(e.value,e.tbrate);
					tds.eq(1).html(e.value);
					tds.eq(2).html(g1+'%').css('color',g1<0?'green':'orange');
					tds.eq(3).html(g2+'%').css('color',g2<0?'green':'orange');
				});
			}
		});
		getJSONData(host+'/data?act=areayear&year='+qstr[0],function(data){
			if(data.Error==null){
				data.Data.forEach(function(e){
					var pm25,jzpm25,id=e.areaid;
					if(parseInt(qstr[0])==2016){
						if(e.monthtype==200+parseInt(qstr[1])){
							pm25=e.pm25;
							jzpm25=e.jzpm25;
						}
					}else{
						pm25=e.pm25;
						jzpm25=e.jzpm25;
					}
					if(pm25!=undefined&&jzpm25!=undefined){
						var g3=getGrowth(pm25,jzpm25);
						$('#st-'+id).find('td').eq(4).html(g3+'%<i class="targetNum">('+areas[id][3]+'%)</i>').css('color',g3<areas[id][3]?'green':'orange');
					}
				});
			}
		});
	}
    
  var __gauge;
  var c1={
        borderColor:'#CBE7F5',
        innerBorderColor:'#D1E9F6',
        arrowColor:'#00A8E0',
        startColor:'#00A8E0',
        endColor:'#72CD2C',
        waveColor:'#72CD2C',
        minValue: 0,
        maxValue: 200,
        img:{
            width:28,
            height:50,
            src:'assets/img/ylvicon.png'
        },
        title:'空气质量优良率'
    };
var c2={
    borderColor:'#F5E7E4',
    innerBorderColor:'#FDD0BB',
    arrowColor:'#E85800',
    startColor:'#E85800',
    endColor:'#F48C70',
    waveColor:'#E85800',
    minValue: 0,
    maxValue: 200,
    img:{
        width:28,
        height:50,
        src:'assets/img/ylvicon.png'
    },
    title:'优良天数'
}
function setYlvChart(month){
    var qstr=month.split('-');
    getJSONData(host+'/data?act=areayear&year='+qstr[0],function(data){
            if(data.Error==null){
                data.Data.forEach(function(e){
                    var yldays,jzyldays,id=e.areaid;
                    if(id==16){
                        if(parseInt(qstr[0])==2016){
                            if(e.monthtype==200+parseInt(qstr[1])){
                                yldays=e.yldays;
                                jzyldays=e.jzyldays;
                            }
                        }else{
                            yldays=e.yldays;
                            jzyldays=e.jzyldays;
                        }
                        if(yldays!=undefined&&jzyldays!=undefined){
                            var v=yldays/jzyldays,c=v>=1?c1:c2;
                            c.title='优良天数 '+yldays+'天,'+'目标 '+jzyldays+' 天,完成率 '+(v*100).toFixed(0)+'%。';
                            var chart1=new __gauge('#chart-1',0, c);
                            chart1.update(v*100);
                            $('#chart-1-title').html(c.title);
                        }
                    }
                });
            }
        });
}
require.config({
        paths: {
            d3:'./assets/js/d3.v3.min',
            gauge:'./assets/js/gauge',
            jquery:'./assets/js/jquery'
        }
    });
    require(['gauge'],function(gauge){
        __gauge=gauge;
        setYlvChart(currentYear+'-'+currentMonth);
    });
  
  var AllCitys=["海门","鄂尔多斯","招远","舟山","齐齐哈尔","盐城","赤峰","青岛","乳山","金昌","泉州","莱西","日照","胶南","南通","拉萨","云浮","梅州","文登","上海","攀枝花","威海","承德","厦门","汕尾","潮州","丹东","太仓","曲靖","烟台","福州","瓦房店","即墨","抚顺","玉溪","张家口","阳泉","莱州","湖州","汕头","昆山","宁波","湛江","揭阳","荣成","连云港","葫芦岛","常熟","东莞","河源","淮安","泰州","南宁","营口","惠州","江阴","蓬莱","韶关","嘉峪关","广州","延安","太原","清远","中山","昆明","寿光","盘锦","长治","深圳","珠海","宿迁","咸阳","铜川","平度","佛山","海口","江门","章丘","肇庆","大连","临汾","吴江","石嘴山","沈阳","苏州","茂名","嘉兴","长春","胶州","银川","张家港","三门峡","锦州","南昌","柳州","三亚","自贡","吉林","阳江","泸州","西宁","宜宾","呼和浩特","成都","大同","镇江","桂林","张家界","宜兴","北海","西安","金坛","东营","牡丹江","遵义","绍兴","扬州","常州","潍坊","重庆","台州","南京","滨州","贵阳","无锡","本溪","克拉玛依","渭南","马鞍山","宝鸡","焦作","句容","北京","徐州","衡水","包头","绵阳","乌鲁木齐","枣庄","杭州","淄博","鞍山","溧阳","库尔勒","安阳","开封","济南","德阳","温州","九江","邯郸","临安","兰州","沧州","临沂","南充","天津","富阳","泰安","诸暨","郑州","哈尔滨","聊城","芜湖","唐山","平顶山","邢台","德州","济宁","荆州","宜昌","义乌","丽水","洛阳","秦皇岛","株洲","石家庄","莱芜","常德","保定","湘潭","金华","岳阳","长沙","衢州","廊坊","菏泽","合肥","武汉","大庆","淮南","滁州","香港","澳门","台北","草场门","中华门","瑞金路","玄武湖","山西路","迈皋桥","仙林大学城","奥体中心","浦口","江宁彩虹桥","高淳淳溪","六合雄州","溧水永阳"];
    var SHCitys=['北京','上海','天津','重庆','哈尔滨','长春','沈阳','呼和浩特','石家庄','乌鲁木齐','兰州','西宁','西安','银川','郑州','济南','太原','合肥','武汉','长沙','南京','成都','贵阳','昆明','南宁','拉萨','杭州','南昌','广州','福州','海口','深圳','台北','香港','澳门'];
    var JSCitys  = ['盐城','南通','扬州','泰州','镇江','宿迁','苏州','淮安','常州','连云港','无锡','南京','徐州'];
    var CSJCitys = ['上海','杭州','宁波','绍兴','湖州','嘉兴','舟山','台州','合肥','马鞍山','金华','衢州','芜湖','滁州','淮南','丽水','温州','盐城','南通','扬州','泰州','镇江','宿迁','苏州','淮安','常州','连云港','无锡','南京','徐州'];
    var NJCitys=['南京','草场门','中华门','瑞金路','玄武湖','山西路','迈皋桥','仙林大学城','奥体中心','浦口','江宁彩虹桥','高淳淳溪','六合雄州','溧水永阳'];
    var colors=['#8F1531', '#CE222F', '#FA3F00','#FF9E00','#EED800','#29C500'];
    var AllAQIs={};
// 省内城市
getJSONData(host+"/map",function(data){
    if(data.Error==null){
    data.Data.forEach(function(e){
        AllAQIs[RMS(e.name)]=parseInt(e.aqi);
    });
    }
    // 南京监测点
    getJSONData(host+"/data?act=aqiarean",function(data){
        if(data.Error==null){
            var d=data.Data;
            for(var i in d){
                if(d[i].name=='市区'){
                    AllAQIs['南京']=d[i].aqi;
                }else{
                    AllAQIs[d[i].name]=d[i].aqi;
                }
            }
        }
        var data=[];
        for(var i in AllAQIs){
            data.push({name:i,value:AllAQIs[i]});
        }
        showChart(data);
    });
});
function getGrowth(v1,v2){
		if(v1==''||v2=='') return '';
		return (((v1-v2)/v2)*100).toFixed(2);
	}
function getCitys(type){
  __type=type;
	if(type<=7){
		return AllCitys
	}else{
		return [].concat(NJCitys,AllCitys)
	}
}
function getAQI(aqi){
	var num=parseInt(aqi);
	if(isNaN(num)) return null;
	return num
}

var dom = document.getElementById("allmap");
var myChart = echarts.init(dom);
var app = {},option = null;

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

function showChart(data){
    var option = {
        backgroundColor: '#404a59',
        title: {
            text: '',
            x:'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.name + ' AQI: ' + params.value[2]+ '('+num2table(params.value[2]).note+')';
            }
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x:'right',
            data:['pm2.5'],
            textStyle: {
                color: '#fff'
            }
        },
        dataRange: {
            min: 0,
            max: 300,
            calculable: true,
            color: colors,
            textStyle: {
                color: '#fff'
            },
            show:false
        },
        geo: {
            map: 'china',
            roam:true,
            label: {
                emphasis: {
                    show: true
                }
            },
            zoom:1,
            scaleLimit: {
                min: 1,
                max: 5
            },
            center:[118.78,32.04],
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                }
            }
            ,silent:false
        },
        roamController: {
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series: [
            {
                name: '',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: 12,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    }
                },
                itemStyle: {
                    emphasis: {
                        borderColor: '#fff',
                        borderWidth: 1
                    }
                }
            }
           ,{
                name: '',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data:[{name:'北京',value:[116.46,39.92,10]},{name:'南京',value:[118.78,32.04,10]}],
                symbolSize: 0.1,
                hoverAnimation: false,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                zlevel: 1
            }
        ]
    };
    
    myChart.setOption(option, true);
}

setTimeout(function(){
    myChart.setOption({geo:{center:[118.78,32.04]}}, false);
},2000);

function num2color(num){
		var num=parseInt(num);
		var color='#23C700';
		if(num<50){
			color='#23C700';
		}else if(50<num&&num<=100){
			color='#ECD814';
		}else if(100<num&&num<=150){
			color='#FF9D01';
		}else if(150<num&&num<=200){
			color='#F83702';
		}else if(200<num&&num<=300){
			color='#CD162E';
		}else if(num>300){
			color='#8E0C30';
		}
		return color
	}	
	
	function num2table(num){
		var num=parseInt(num);
		var idx=0,note='';
		if(num<50){
			idx=0;
			note='优秀';
		}else if(50<=num&&num<=100){
			idx=1;
			note='良好';
		}else if(100<num&&num<=150){
			idx=2;
			note='轻度污染';
		}else if(150<num&&num<=200){
			idx=3;
			note='中度污染';
		}else if(200<num&&num<=300){
			idx=4;
			note='重度污染';
		}else if(num>300){
			idx=5;
			note='严重污染';
		}
		return {idx:idx,note:note}
	}
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259663969'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259663969' type='text/javascript'%3E%3C/script%3E"));</script>
</html>